<template>
  <div id="top">
    <el-button
      type="warning"
      icon="el-icon-edit"
      :size="btn1"
      @click="clickEdit"
      circle
    ></el-button>
    <el-button
      type="info"
      icon="el-icon-partly-cloudy"
      :size="btn2"
      @click="clickClear"
      circle
    ></el-button>
    <el-button
      type="success"
      icon="el-icon-download"
      size="small"
      @click="centerDialogVisible = true"
      circle
    ></el-button>
    <el-button
      icon="el-icon-back"
      size="small"
      circle
      @click="back"
      :disabled="disabled"
    ></el-button>
    <el-button
      type="danger"
      icon="el-icon-delete"
      size="small"
      @click="remove"
      circle
    ></el-button>

    <el-popover placement="top-start" width="200" trigger="click">
      <el-color-picker
        v-model="color"
        :predefine="predefineColors"
      ></el-color-picker>
      <el-slider v-model="value" :step="1" :min = "1" :max= "4" show-stops :show-tooltip = "tooltip"> </el-slider>

      <el-button
        slot="reference"
        type="primary"
        round
        size="small"
        >颜色<i class="el-icon-picture-outline-round el-icon--right"></i
      ></el-button>
    </el-popover>

    <el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="60%"
  center>
  <span>请您选择是要下载还是上传图片<b>（玩你画我猜请上传）</b></span>
  <span slot="footer" class="dialog-footer">
    <el-button type = "primary" @click="download">下载</el-button>
    <el-button type = "primary" @click="upload">上传</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import bus from "../utils/eventBus";

export default {
  name: "top",
  data() {
    return {
      btn1: "medium",
      btn2: "small",
      tooltip: false,
      centerDialogVisible: false,
      value: 1,     // 线条宽度
      disabled: true, // 是否撤销
      color: "#000000",   // 画笔颜色
      predefineColors: [
        "#000000",
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
      ],
    };
  },

  watch:{   // 监听画笔宽度和颜色修改
      color(newColor,_oldColor){
          bus.$emit('pencilColor',newColor);
      },
 
      value(newValue,_oldValue){
          bus.$emit('pencilWidth',newValue);
      }

  },

  created() {
    bus.$on("disabled", (message) => {
      // 禁用撤销
      console.log(message);
      this.disabled = true;
    });

    bus.$on("abled", (message) => {
      // 启用撤销
      console.log(message);
      this.disabled = false;
    });
  },

  methods: {
    clickEdit() {
      // 点击画笔按钮，画笔按钮变大，橡皮擦变小
      this.btn1 = "medium";
      this.btn2 = "small";

      bus.$emit("pencil", "启用画笔");
    },

    clickClear() {
      // 点击橡皮擦按钮，画笔按钮变小，橡皮擦变大
      this.btn1 = "small";
      this.btn2 = "medium";

      bus.$emit("eraser", "启用橡皮擦");
    },

    back() {
      bus.$emit("back", "撤回");
    },

    remove() {
      bus.$emit("delete", "清空画布");
    },

    download(){
      bus.$emit('download','本地下载');
      this.centerDialogVisible = false;
    },

    upload(){
      bus.$emit('upload','上传');
      this.centerDialogVisible = false;
    }
  },
};
</script>

<style scoped>
#top {
  width: 100vw;
  flex: 1;
  background-color: #c5c5c5;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
</style>
